import { Fragment, useState, useRef } from "react"
import TodoList from "./todoList"
import TodoInput from "./todoInput"

//功能
//1.根据数据,渲染列表

//2.在input中输入,输入完成增加到list展示

//3.点击删除按钮,删除对应的数据

const TodoContainer = () => {
    //声明数据
    let [data, setDate] = useState<Idata>([
        {
            id: '1',
            todo: 'Hello World',
            completed: false
        },
        {
            id: '2',
            todo: '写代码',
            completed: true
        }
    ])

    //创建一个ref引用,用于接收子组件暴露出来的属性

    let ipt = useRef<Iimperative | null>(null)

    //声明一个方法,增加todo

    let addTodo = () => {

        //非空验证
        if (!ipt.current!.val) {
            return
        }
        // console.log(ipt.current);
        let obj = {
            id: Math.random().toString(32).substring(2),
            todo: ipt.current!.val,
            completed: false
        }
        data.push(obj)
        setDate([...data])
    }

    //删除todo的方法

    let delTodo = (id: string) => {
        console.log(id);
        //通过id,过滤掉data中id和当前传入id相同的数据
        let newData = data.filter(item => item.id !== id)
        //重新更新数据
        setDate(newData)
    }

    return (
        <Fragment>
            <TodoInput ref={ipt} addTodo={addTodo} />
            <TodoList data={data} delTodo={delTodo} />
        </Fragment>
    )
}

export default TodoContainer